<template>
  <div>
      <div class="bot_tabs flex_center">
          <div v-bind:class="{ tab:true,on:(route=='/'||route=='/index') }" @click="navito('/index')">
              <div class="icon icon-job"></div>
              <p>工作</p>
          </div>
          <div v-bind:class="{ tab:true,on:route=='/message' }" @click="navito('/message')">
              <div class="icon icon-message">
                  <i class="circle" v-if="hasNew"></i>
              </div>
              <p>消息</p>
          </div>
          <div v-bind:class="{ tab:true,on:route=='/infos'}" @click="navito('/infos')">
              <div class="icon icon-infos"></div>
              <p>资讯</p>
          </div>
          <div v-bind:class="{ tab:true,on:route=='/mycenter'}" @click="navito('/mycenter')">
              <div class="icon icon-mine"></div>
              <p>我的</p>
          </div>
      </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'BottomTab',
  data() {
    return {
    }
  },
  computed: {
    ...mapState({
      hasNew: function(){return this.$store.state.hasNew}
    })
  },
  props:['route'],
  methods: {
    navito(url){
      this.$router.push({path:url}); 
    },
  },
  created () {
      let uid = localStorage.getItem('uid');
      if(!uid){ return }
      this.Http2.get("/mobile/notice/page", {
        current: 1,
        size: 1,
        receiver: uid
      }).then(
        res => {
            let obj = res.object[0];
          let date = obj ? obj.createDate : 0;
          let unix = date ? new Date(date.replace(/-/g,'/')).getTime() : 0;
          let messunix = localStorage.getItem('messunix') || 0;
            if(unix>messunix){
                this.$store.commit('SETNEWS', true);
            }
        }
      );
  },
  components: {

  }
}
</script>

<style lang="scss">
    @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio : 3){
      .bot_tabs {
        padding-bottom: .4rem;
      }
    }
    .bot_tabs{
        position: fixed;
        border-top: 1px solid #eee;
        left:0;
        bottom: 0;
        width: 100%;
        background: #fff;
        .icon-message{
            position: relative;
        }
        .circle{
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: red;
        }
        >.tab{
            flex: 1;
            text-align: center;
            .icon{
                width: .6rem;
                height: .55rem;
                margin: .15rem auto;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center center;
            }
           .icon-job{
               background-image: url(../../assets/img/guwen@2x.png);
           }
           .icon-message{
               background-image: url(../../assets/img/xiaoxi@2x.png);
           }
           .icon-infos{
               background-image: url(../../assets/img/infos.png);
           }
           .icon-mine{
               background-image: url(../../assets/img/pcenter.png);
           }
            >p{
                margin-bottom: .1rem;
            }
        }
        .tab.on{
            .icon-job{
               background-image: url(../../assets/img/job.png);
           }
           .icon-message{
               background-image: url(../../assets/img/ic_reminder_normal@2x.png);
           }
           .icon-infos{
               background-image: url(../../assets/img/infos@2x.png);
           }
           .icon-mine{
               background-image: url(../../assets/img/gerenzhongxin-xuanzhong@2x.png);
           }
           >p{
               color: #333;
           }
        }
    }
</style>
